<!--
 * @Author: zhuhongda
 * @Date: 2021-08-06 10:47:12
 * @LastEditTime: 2021-08-24 09:39:16
 * @LastEditors: Please set LastEditors
 * @Description: 新闻详情
 * @FilePath: \cscec-pms-admin\src\views\partyMasses\partyManage\newsManage\newsDetail.vue
-->
<template>
  <base-breadcrumb v-loading="loadingState.isDetail" class="newsDetail-container">
    <a-card :bordered="false" style="padding: 32px; margin-bottom: 40px">
      <div class="news-header">
        <h1 class="news-title">
          {{ formInfo.title }}
        </h1>
        <div class="news-tip">
          <span>作者：{{ formInfo.authorName }}</span>
          <span class="ml20">发布时间：{{ formInfo.releaseTime }}</span>
        </div>
      </div>
      <div class="news-content" v-html="formInfo.content" />
      <div class="tool-btns tool-btns--fixed page-btn-right-top">
        <a-button class="ml12" type="primary" @click="handleClose"> 关闭</a-button>
      </div>
    </a-card>
  </base-breadcrumb>
</template>

<script>
import { getDetail, getReleaseDetail, increaseReadingQuantity } from '@/api/partyMasses/partyManage/newsManage.js'

export default {
  name: 'a' + Date.now(),
  data() {
    return {
      formInfo: {},
      loadingState: {
        isDetail: false
      },
      id: null
    }
  },
  activated() {
    if (this.id != this.$route.query.id) {
      // 获取详情
      this.getDetailReq()
      // 增加阅读量
      this.addViews()
      this.id = this.$route.query.id
    }
  },
  created(){
    if (this.id != this.$route.query.id) {
      // 获取详情
      this.getDetailReq()
      // 增加阅读量
      this.addViews()
      this.id = this.$route.query.id
    }
  },
  methods: {
    /**
     * @description: 增加阅读量
     */
    addViews() {
      try {
        if (!this.$route.query.id || this.$route.query.preView) return
        const params = {
          id: this.$route.query.id
        }
        // 请求添加阅读量
        increaseReadingQuantity(params).then((res) => {
          if (res.code === 200) {
            let readingQuantity = localStorage.getItem('readingQuantity') // 新闻阅读量缓存
            // 若存在新闻阅读量缓存
            if (readingQuantity) {
              readingQuantity = JSON.parse(readingQuantity)
              // 若不存在当前新闻
              if (!readingQuantity[this.$route.query.id]) {
                readingQuantity[this.$route.query.id] = []
              }
              readingQuantity[this.$route.query.id].push(this.$userInfo()?.id)
            } else {
              // 添加当前新闻到缓存，且给当前新闻添加当前阅读者id
              readingQuantity = {
                [this.$route.query.id]: [this.$userInfo()?.id]
              }
            }
            // 缓存新闻阅读
            localStorage.setItem('readingQuantity', JSON.stringify(readingQuantity))
          }
        })
      } catch (e) {
        console.error(e)
      }
    },
    /**
     * @description: 请求详情
     */
    async getDetailReq() {
      try {
        if (!this.$route.query.id) return
        const params = {
          id: this.$route.query.id
        }
        this.loadingState.isDetail = true
        let res = this.$route.query.preView ? await getReleaseDetail(params) : await getDetail(params)
        this.formInfo = {
          ...this.formInfo,
          ...res.data
        }
      } catch (e) {
        console.error(e)
      }
      this.loadingState.isDetail = false
    },
    /**
     * @description: 关闭页面
     */
    handleClose() {
      this.$close()
    }
  }
}
</script>

<style lang="less" scoped>
.news-header {
  padding-bottom: 30px;

  .news-title {
    text-align: center;
    font-size: 38px;
    margin-bottom: 0;
  }

  .news-tip {
    display: flex;
    justify-content: center;
    color: #cccccc;
  }
}

.news-content {
  min-height: 300px;
}
</style>